/*  
 *  webpack 2生产环境配置
 **
 *  生产环境与开发环境的比较:
 *      1. 生产环境需要template模版,来动态添加带有版本号、打包后的文件
        2. 生产环境需要新增OPTS.bundle.chunkFilename生成manifest.js来记录未改动的文件,防止多次打包而改变版本号,导致客户原本可利用的本地缓存文件失效
        3. 其他请看readme.md

    注意:
        1. 打包发布时静态资源未找到的原因,一般只需要改改该绝对路径即可
 */
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html文件
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require("extract-text-webpack-plugin"); // 安装后引入插件。css单独打包
const CleanWebpackPlugin = require('clean-webpack-plugin');

const ROOT_PATH = path.resolve(__dirname);
const OPTS = {
    entry: {
        app: './src/main.js', //不可省略'./'
        vendor: ['jquery'] //第三方库.如果不希望打包第三方库而是使用cdn加速,那么此项与OPTS.chunkFilename与'manifest'三者一并删除。
    },
    bundle: {
        toFolder: './dist/app/', //所有打包的文件存放根目录
        filename: 'js/[name].[chunkhash:8].js',
        chunkFilename: "js/[name].[chunkhash:8].js", //chunkHash将配合manifest.js,使未改动的文件(一般是第三方库)在打包的时候也不改变hash
        imageFilename: 'img/[hash:8].[ext]',

        cssFilename: 'css/[name].[contenthash:8].css', //从js中提取出的.css文件。如果不希望提取,此项与含ExtractTextPlugin多项删除,再取消含有style-laoder的loader项

        publicPath: '/dist/app/' //绝对路径,用于发布,务必以'/'开头
    },
    html: {
        template: './template.html',
        favicon: './src/favicon.ico',
        filename: './index.html'
    },
    prefix: {
        browsers: ['> 5%', 'iOS 8'] //css3前缀版本需求
    }
};

module.exports = {
    entry: OPTS.entry,
    output: {
        path: path.resolve(ROOT_PATH, OPTS.bundle.toFolder),
        publicPath: OPTS.bundle.publicPath,
        filename: OPTS.bundle.filename
    },
    module: {
        rules: [
            // { test: /\.less$/, loader: 'style-loader!css-loader!postcss-loader!less-loader' },//不单独提取.css文件时使用
            { test: /\.less$/, loader: ExtractTextPlugin.extract(['css-loader', 'postcss-loader', 'less-loader']) },

            // { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' },
            { test: /\.(jpg|png|gif)$/i, loader: 'file-loader?name=' + OPTS.bundle.imageFilename }, // 不支持ico格式.css部分背景图片的路径及文件名
            { test: /\.html$/, loader: "html-loader" }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(new Array(OPTS.bundle.toFolder)), //删除打包文件存放的目录内的旧文件

        new webpack.DefinePlugin({
            'process.env': { NODE_ENV: '"production"' }
        }),
        new webpack.optimize.CommonsChunkPlugin({ //配合vendor生成manifest.js及vendor.js
            names: ['vendor', 'manifest']
        }),

        new HtmlWebpackPlugin({ //可以多new几个实例实现多个页面打包,但需要注意引用的js
            template: OPTS.html.template,
            favicon: OPTS.html.favicon,
            filename: OPTS.html.filename,
            inject: true,
            // chunks: ['vendor', 'manifest'],//这里设置需要插入的js文件
            hash: false, //形如: xxx.js?[hash]
            minify: {
                removeComments: true,
                collapseWhitespace: true
            }
        }),
        new webpack.LoaderOptionsPlugin({ //webpack2写法上的差异
            options: { postcss: [autoprefixer(OPTS.prefix)] }
        }),
        new ExtractTextPlugin(OPTS.bundle.cssFilename), //生成的css路径及文件名

        new webpack.optimize.UglifyJsPlugin({ minimize: false, output: { comments: false } }) //(压缩已经由webpack -p来处理)清除注释。webpack -p不能清除/* xxx */这样的注释
    ],
    performance: {
        hints: false
    }
}
